<template>
  <view class="px-[30rpx] py-[28rpx]">
    <!-- 导航栏 -->
    <up-navbar
      title="个人中心"
      leftIcon=""
      :placeholder="true"
      bgColor="transparent"
      leftIconColor="#fff"
      titleStyle="color: #fff;font-weight: bold;font-size: 34rpx">
    </up-navbar>
    <!-- 个人信息 -->
    <view class="flex items-center justify-between">
      <view class="flex items-center flex-1">
        <view
          class="z-10 w-[116rpx] h-[116rpx] rounded-full border-[4rpx] border-[#fff]">
          <up-image
            :src="$url(userStore.userInfo.avatar) || defAvatar"
            width="108rpx"
            height="108rpx"
            shape="circle"></up-image>
        </view>
        <view class="text-[26rpx] text-white h-[116rpx] flex flex-col flex-1">
          <view
            class="pl-[88rpx] -translate-x-[76rpx] flex-1 flex items-center bg-[#18171D] w-[80%] rounded-[36rpx] rounded-br-none"
            >{{ userStore.userInfo.nickName || "未登录" }}</view
          >
          <view
            class="bg-[#000] bg-opacity-50 flex-1 -translate-x-[82rpx] flex items-center justify-between w-full border-[4rpx] border-[#ccc] rounded-[36rpx] pl-[94rpx] pr-[30rpx]">
            <view>UID：{{ userStore.userInfo.userId || "xxxxx" }}</view>
            <up-icon
              name="file-text"
              color="#fff"
              size="16"
              @click="
                utils.copyText(userStore.userInfo.userId?.toString())
              "></up-icon>
          </view>
        </view>
      </view>
      <view
        class="flex-shrink-0"
        @click="utils.useRouter('/goods_packages/setting/setting')">
        <view class="w-[48rpx] h-[48rpx]">
          <up-image
            :src="setting"
            width="100%"
            height="100%"
            bgColor="transparent"
            class="setting_dorp"></up-image>
        </view>
        <view class="text-[26rpx] font-heiti text-white mt-[8rpx] setting">
          设置
        </view>
      </view>
    </view>
    <!-- 会员等级 -->
    <view class="w-full h-[216rpx] relative mt-[48rpx]">
      <up-image
        :src="member"
        width="100%"
        height="100%"
        :webp="false"
        bgColor="transparent"
        class="absolute top-0 left-0"></up-image>
      <view
        class="flex flex-col justify-between h-full w-full p-[30rpx] z-10 relative">
        <view class="flex items-center justify-between text-white">
          <view class="text-[34rpx] font-heiti"
            >Lv.{{ userStore.userInfo.appLevel?.num || 0 }}</view
          >
          <view
            @click="
              utils.useRouter('/goods_packages/equityCenter/equityCenter')
            "
            class="text-[24rpx] px-[20rpx] py-[8rpx] border border-[#fff] rounded-[8rpx]"
            >权益中心</view
          >
        </view>
        <progress
          :percent="
            ((userStore.userInfo?.totalPoint || 0) / userStore.pointTotal) * 100
          "
          stroke-width="24rpx"
          activeColor="#B51A26"
          backgroundColor="#641523" />
        <view
          class="text-[24rpx] text-white"
          v-if="
            userStore.pointTotal - (userStore.userInfo?.totalPoint || 0) > 0
          ">
          {{ userStore.userInfo.totalPoint || 0 }} /
          {{ userStore.pointTotal }}距离下一级还需{{
            (
              userStore.pointTotal - (userStore.userInfo?.totalPoint || 0)
            ).toFixed(2)
          }}积分
        </view>
        <view v-else class="text-[24rpx] text-white">您已达最高等级</view>
      </view>
    </view>
    <!-- 统计 -->
    <view class="grid grid-cols-2 gap-[38rpx] mt-[34rpx]">
      <view
        class="relative w-full h-[130rpx]"
        @click="utils.useRouter('/goods_packages/coinDetail/coinDetail')">
        <up-image
          :src="tag"
          width="100%"
          height="100%"
          :webp="false"
          bgColor="transparent"
          class="absolute top-0 left-0"></up-image>
        <view
          class="relative z-10 flex items-center justify-between px-[30rpx] w-full h-full">
          <view class="">
            <view class="font-heiti text-[40rpx] text-white">代币</view>
            <view class="flex items-center">
              <view class="text-[24rpx] min-w-[3em] gradient">{{
                userStore.userInfo.amount || 0
              }}</view>
              <view class="w-[24rpx] h-[24rpx] ml-[8rpx]">
                <up-image
                  :src="arrow"
                  width="100%"
                  height="100%"
                  bgColor="transparent"></up-image>
              </view>
            </view>
          </view>
          <view class="w-[88rpx] h-[88rpx]">
            <up-image
              :src="coin"
              width="100%"
              height="100%"
              bgColor="transparent"></up-image>
          </view>
        </view>
      </view>
      <view
        class="relative w-full h-[130rpx]"
        @click="utils.useRouter('/goods_packages/pointDetail/pointDetail')">
        <up-image
          :src="tag"
          width="100%"
          height="100%"
          :webp="false"
          bgColor="transparent"
          class="absolute top-0 left-0"></up-image>
        <view
          class="relative z-10 flex items-center justify-between px-[30rpx] w-full h-full">
          <view class="">
            <view class="font-heiti text-[40rpx] text-white">积分</view>
            <view class="flex items-center">
              <view class="text-[24rpx] min-w-[3em] gradient">{{
                userStore.userInfo.point || 0
              }}</view>
              <view class="w-[24rpx] h-[24rpx] ml-[8rpx]">
                <up-image
                  :src="arrow"
                  width="100%"
                  height="100%"
                  bgColor="transparent"></up-image>
              </view>
            </view>
          </view>
          <view class="w-[88rpx] h-[88rpx]">
            <up-image
              :src="point"
              width="100%"
              height="100%"
              bgColor="transparent"></up-image>
          </view>
        </view>
      </view>
    </view>
    <!-- 功能 -->
    <view class="w-ful h-[356rpx] relative mt-[34rpx]">
      <up-image
        :src="options"
        bgColor="transparent"
        width="100%"
        height="100%"
        :webp="false"
        class="absolute top-0 left-0"></up-image>
      <view class="relative z-10 w-full h-full grid grid-cols-4 p-[40rpx]">
        <button
          class="flex flex-col items-center justify-center u-reset-button"
          :open-type="item.openType || ''"
          v-for="(item, index) in optionsList"
          @click="item.fn && item.fn()"
          :key="index">
          <view class="w-[60rpx] h-[60rpx]">
            <up-image
              :src="item.icon"
              bgColor="transparent"
              width="100%"
              height="100%"></up-image>
          </view>
          <view class="font-heiti text-[22rpx] text-white mt-[8rpx]">{{
            item.name
          }}</view>
        </button>
      </view>
    </view>
    <!-- 兑换码弹窗 -->
    <MyPopup
      :show="exchangeShow"
      @close="exchangeShow = false"
      :titleIcon="exchangeTitle">
      <view
        class="w-[520rpx] py-[48rpx] flex items-center justify-center flex-col">
        <view class="text-white text-[26rpx] mb-[20rpx]">请输入兑换码</view>
        <view
          class="mb-[20rpx] px-[24rpx] flex items-center border border-[#B51A26] rounded-[16rpx] w-[280rpx] h-[60rpx]">
          <input
            type="text"
            v-model="exchangeNum"
            class="text-white text-[28rpx]"
            placeholder="请输入兑换码" />
        </view>
        <view
          @click="
            utils.useRouter('/goods_packages/exchange_record/exchange_record')
          "
          class="text-white text-[28rpx] underline underline-offset-[8rpx] mb-[20rpx]">
          兑换记录
        </view>
        <view class="flex justify-center items-center">
          <view class="mr-[30rpx] grayscale">
            <MyButton text="取消" @click="exchangeShow = false" />
          </view>
          <view> <MyButton text="确定" @click="getExchange" /></view>
        </view>
      </view>
    </MyPopup>
    <!-- 领取成功弹窗 -->
    <MyPopup :show="exchangeGiftShow" :titleIcon="exchangeGift">
      <view
        class="w-[520rpx] py-[48rpx] flex items-center justify-center flex-col">
        <view class="text-white text-[26rpx] mb-[48rpx]">恭喜获得以下物品</view>
        <view
          class="w-[128rpx] h-[128rpx] mb-[56rpx] flex items-center justify-center relative rounded-[16rpx] border border-[#B51A26] bg-[#202123]">
          <view class="w-[88rpx] h-[88rpx]">
            <up-image
              v-if="exchangeGiftData.type === 1"
              :src="coin"
              width="100%"
              height="100%"
              bgColor="transparent"></up-image>
            <up-image
              v-if="exchangeGiftData.type === 2"
              :src="$url(exchangeGiftData.object?.pic)"
              width="100%"
              height="100%"
              bgColor="transparent"></up-image>
            <up-image
              v-if="exchangeGiftData.type === 3"
              :src="couponIcon"
              width="100%"
              height="100%"
              bgColor="transparent"></up-image>
          </view>
          <view
            class="text-[24rpx] absolute bottom-[6rpx] right-[10rpx] text-[#B51A26]">
            x
            <text v-if="exchangeGiftData.type === 1">{{
              exchangeGiftData.object
            }}</text>
            <text v-if="exchangeGiftData.type === 2">{{
              exchangeGiftData.object.num || 1
            }}</text>
            <text v-if="exchangeGiftData.type === 3">{{
              exchangeGiftData.object.num || 1
            }}</text>
          </view>
        </view>
        <MyButton text="确定" @click="exchangeGiftShow = false" />
      </view>
    </MyPopup>
    <!-- 用户协议弹窗 -->
    <MyPopup
      :show="agreementShow"
      :titleIcon="agreementTitle"
      @close="agreementShow = false">
      <view class="w-[622rpx] p-[40rpx] flex flex-col items-center">
        <scroll-view scroll-y class="h-[540rpx] mb-[24rpx]">
          <rich-text
            class="text-white text-[30rpx]"
            nodes="我知道了"></rich-text>
        </scroll-view>
        <MyButton text="我知道了" @click="agreementShow = false" />
      </view>
    </MyPopup>
    <!-- 登录弹窗 -->
    <GlobalLoginDialog />
    <!-- 背景 -->
    <BackgroundImage />
    <!-- 底部导航栏 -->
    <CustomTabbar :currentIndex="3" />
  </view>
</template>

<script setup>
import defAvatar from "@/static/images/mine/defAvatar.png";
import setting from "@/static/images/mine/setting.png";
import member from "@/static/images/mine/member.png";
import tag from "@/static/images/mine/tag.png";
import coin from "@/static/images/mine/coin.png";
import point from "@/static/images/mine/point.png";
import arrow from "@/static/images/mine/arrow.png";
import options from "@/static/images/mine/options.png";
import exchange from "@/static/images/mine/exchange.png";
import coupon from "@/static/images/mine/coupon.png";
import collect from "@/static/images/mine/collect.png";
import order from "@/static/images/mine/order.png";
import address from "@/static/images/mine/address.png";
import service from "@/static/images/mine/service.png";
import agreement from "@/static/images/mine/agreement.png";
import exchangeTitle from "@/static/images/mine/exchangeCode.png";
import agreementTitle from "@/static/images/mine/agreementTitle.png";
import exchangeGift from "@/static/images/mine/exchangeGift.png";
import couponIcon from "@/static/images/common/coupon.png";
import MyButton from "@/components/MyButton.vue";
import GlobalLoginDialog from "@/components/GlobalLoginDialog.vue";
import { reactive, ref } from "vue";
import { useUserStore } from "@/store/user";
import { onShow } from "@dcloudio/uni-app";
import utils from "@/utils/utils";
import { exchangeCode } from "@/api/user";
onShow(() => {
  userStore.getUserInfoReq();
});
// 用户信息
const userStore = useUserStore();
const {
  optionsList,
  exchangeShow,
  exchangeNum,
  exchangeGiftShow,
  agreementShow,
  getExchange,
  exchangeGiftData,
} = useOptions();
/**
 * @description: 用户操作
 * @returns {Array} optionsList 操作列表
 * @returns {Boolean} exchangeShow 兑换码弹窗
 * @returns {Boolean} exchangeGiftShow 领取成功弹窗
 * @returns {Boolean} agreementShow 用户协议弹窗
 * @returns {String} exchangeNum 兑换码
 */
function useOptions() {
  const exchangeShow = ref(false);
  const exchangeGiftShow = ref(false);
  const agreementShow = ref(false);
  const exchangeNum = ref("");
  const exchangeGiftData = ref({});
  const optionsList = reactive([
    {
      name: "兑换码",
      icon: exchange,
      fn: () => {
        exchangeShow.value = true;
      },
    },
    {
      name: "优惠卷",
      icon: coupon,
      fn: () => {
        uni.navigateTo({
          url: "/goods_packages/myCoupon/myCoupon",
        });
      },
    },
    {
      name: "我的收藏",
      icon: collect,
      fn: () => {
        uni.navigateTo({
          url: "/goods_packages/myCollection/myCollection",
        });
      },
    },
    {
      name: "赏袋订单",
      icon: order,
      fn: () => {
        uni.navigateTo({
          url: "/goods_packages/myOrder/myOrder",
        });
      },
    },
    {
      name: "收货地址",
      icon: address,
      fn: () => {
        uni.navigateTo({
          url: "/goods_packages/myAddress/myAddress",
        });
      },
    },
    {
      name: "用户协议",
      icon: agreement,
      fn: () => {
        // agreementShow.value = true;
        utils.goRules("用户协议");
      },
    },
    {
      name: "联系客服",
      icon: service,
      openType: "contact",
    },
  ]);
  const getExchange = async () => {
    try {
      const res = await exchangeCode({
        cdk: exchangeNum.value,
      });
      // exchangeGiftData.value = res.data;
      exchangeShow.value = false;
      exchangeNum.value = "";
      utils.showToast("兑换成功,可在兑换记录中查看");
      // exchangeGiftShow.value = true;
    } catch (error) {}
  };
  return {
    optionsList,
    exchangeShow,
    exchangeGiftData,
    exchangeNum,
    exchangeGiftShow,
    agreementShow,
    getExchange,
  };
}
</script>

<style lang="scss" scoped>
.setting {
  text-shadow: 0px 0px 8px #b51a26;
}
.setting_dorp {
  filter: drop-shadow(0px 0px 8px #b51a26);
}
//文字渐变
.gradient {
  background-image: linear-gradient(90deg, #d81b2a 0%, #ffffff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
